<!-- 路由 -->
import Vue from 'vue';
import Router from 'vue-router';
// 登录
import login from '@/views/login';
// 首页
import index from '@/views/index';
//  首页概览
import thinking from '@/views/charts/thinking';
/**
 * 基础菜单
 */
// 手术室管理
import surgical from '@/views/surgical/surgical';
// 手术室设备管理
import equipment from '@/views/equipment/equipment';
// 手术室预约管理
import booking from '@/views/booking/booking';
//手术室录像管理
import videoReplay from '@/views/videoReplay/videoReplay';
//手术室进度
import schedule from '@/views/charts/schedule';
// 用户管理
import user from '@/views/system/user';
// 角色管理
import Role from '@/views/system/Role';
//通知管理
import notice from '@/views/channel/notice';
// 启用路由
Vue.use(Router);
// 导出路由 
export default new Router({
    routes: [{
        path: '/',
        name: '',
        component: login,
        hidden: true,
        meta: {
            requireAuth: false
        }
    }, {
        path: '/login',
        name: '登录',
        component: login,
        hidden: true,
        meta: {
            requireAuth: false
        }
    }, {
        path: '/index',
        name: '首页',
        component: index,
        iconCls: 'el-icon-tickets',
        children: [
            {
                path: '/charts/thinking',
                name: '首页',
                component: thinking,
                meta: {
                    requireAuth: true
                }
            }, 
            {
            path: '/surgical/surgical',
            name: '手术室管理',
            component: surgical,
            meta: {
                requireAuth: true
            }
        }, 
        {
            path: '/equipment/equipment',
            name: '手术室设备管理',
            component: equipment,
            meta: {
                requireAuth: true
            }
        }, 
        {
            path: '/booking/booking',
            name: '手术室预约管理',
            component: booking,
            meta: {
                requireAuth: true
            }
        }, 
        {
            path: '/videoReplay/videoReplay',
            name: '手术室录像管理',
            component: videoReplay,
            meta: {
                requireAuth: true
            }
        }, 
        {
            path: '/charts/schedule',
            name: '手术进度',
            component: schedule,
            meta: {
                requireAuth: true
            }
        },
        {
            path: '/system/user',
            name: '用户管理',
            component: user,
            meta: {
                requireAuth: true
            }
        }, 
        {
            path: '/system/Role',
            name: '角色管理',
            component: Role,
            meta: {
                requireAuth: true
            }
        }, 
        {
            path: '/channel/notice',
            name: '通知公告管理',
            component: notice,
            meta: {
                requireAuth: true
            }
        },
    ]
}]
})
<!-- 首页 -->
<!-- 首页 -->
<template>
  <div class="stbox">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-title">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>概览</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
    <!-- 统计图 -->
    <!-- 手术室状态概览 -->
    <div class="state-title">
      <el-col :span="24">
        <div class="stbgc">
          <el-row>
            <el-col :span="8" class="title">
               手术室状态概览
             </el-col>
            <el-col :span="5" class="text-c">
              <el-radio v-model="type" label="day">日</el-radio>
            </el-col>
            <el-col :span="5" class="text-c">
              <el-radio v-model="type" label="month">月</el-radio>
            </el-col>
            <el-col :span="6" class="text-c">
              <el-radio v-model="type" label="years">年</el-radio>
            </el-col>
          </el-row>
        </div>
      </el-col> 
    </div>
    <el-row :gutter="23">
    <el-col :span="8" class="text-c">
        <div class="st-gbox" style="width:400px;height: 300px;">
          <div class="cavasbox" ref="usechart"></div>
        </div>
      </el-col>
    <el-col :span="8" class="text-c">
        <div class="st-gbox"  style="width:400px;height: 300px;">
          <div class="cavasbox" ref="appointmentEchart"></div>
        </div>
      </el-col>
    </el-row>
    <!-- 统计图  手术数量统计-->
    <el-col :span="24">
      <div class="stbgc">
        <el-row>
          <el-col :span="8" class="title">
            手术数量统计
           </el-col>
          <el-col :span="5" class="text-c">
            <el-radio v-model="type" label="day">日</el-radio>
          </el-col>
          <el-col :span="5" class="text-c">
            <el-radio v-model="type" label="month">月</el-radio>
          </el-col>
          <el-col :span="6" class="text-c">
            <el-radio v-model="type" label="years">年</el-radio>
          </el-col>
        </el-row>
      </div>
    </el-col> 
  <el-row :gutter="23">
  <el-col :span="8" class="text-c">
      <div class="st-gbox" style="width:1400px;height: 350px;">
        <div class="cavasbox" ref="numberchart"></div>
      </div>
    </el-col>
  </el-row>
  </div>
</template>
<script type="text/ecmascript-6">
import Chart from 'echarts'
export default {
  name: "welcome",
  data() {
    return {
      machineNo: '',
      type: 'day',
      // 手术室相关情况
      useoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}%"
        },
        title: {
          text: '手术室当前使用情况',
        },
        grid: {
          left: 50,
          right: 10,
          // top: 30,
          bottom: 30,
          borderWidth: 1
        },
        series: [
          {
            name: '当前使用情况',
            type: 'gauge',
            detail: { formatter: '{value}%' },
            data: [{ value: 42, name: '当前使用情况' }],
            axisLine: {
                lineStyle: {
                    width: 30,
                    color: [
                        [0.3, '#FF6699'], // 0 到 30% 使用颜色渐变
                        [0.7, '#FF66FF'], // 30% 到 70% 使用颜色渐变
                        [1, '#9999FF'],   // 70% 到 100% 使用颜色渐变
                    ]
                }
            },
          }
        ]
      },
        //  手术室预约情况
      appointmentoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}%"
        },
        title: {
          text: '手术室预约情况',
        },
        grid: {
          left: 50,
          right: 10,
          // top: 30,
          bottom: 30,
          borderWidth: 1
        },
        series: [
          {
            name: '预约情况',
            type: 'gauge',
            detail: { formatter: '{value}%' },
            data: [{ value: 69, name: '预约情况' }],
            axisLine: {
                lineStyle: {
                    width: 30,
                    color: [
                        [0.3, '#0000cd'], // 0 到 30% 使用颜色渐变
                        [0.7, '#6633FF'], // 30% 到 70% 使用颜色渐变
                        [1, '#33FFFF'],   // 70% 到 100% 使用颜色渐变
                    ]
                }
            },
          }
        ]
      },
      // 手术数量统计
      numbercollection: {
    xAxis: {
        type: 'category',
        data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [1,1,2,1,2,3,4,2,4,6,8,9,6,7,4,9,10,9,6,4,2,6,3,1,2,3],
        type: 'bar',
        label: { 
            normal: { 
                show: true,
                position: 'inside' 
            } 
        },
    }]
}
    }
  },
  // 导入组件
  components: {
    // 点聚合组件
  },
  // 创建完毕状态(里面是操作)
  created() { },
  // 挂载结束状态(里面是操作)
  mounted() {
    this.getUse()
    this.getAppointment()
    this.getNumber()
  },
  // 里面的函数只有调用才会执行
  methods: {
    // 手术室相关情况
    getUse() {
      this.chart = Chart.init(this.$refs.usechart) //深色模式  ,'dark'
      this.chart.setOption(this.useoption)
    },
    // 手术室预约情况
    getAppointment() {
      this.chart = Chart.init(this.$refs.appointmentEchart)
      this.chart.setOption(this.appointmentoption)
    },
    // 手术数量统计
    getNumber() {
      this.chart = Chart.init(this.$refs.numberchart)
      this.chart.setOption(this.numbercollection)
    },
  }
};
</script>
<style>
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.stbgc {
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  border-radius: 5px;
   padding: 0px 16px; 
}
.stsearch {
  text-align: center;
}
.text-c {
  text-align: center;
}
.st-gbox {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  height: 30vh;
  box-sizing: border-box;
  padding: 10px;
}
.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.paybox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 32vh;
}
.state-title{
  margin-top: 20px;
  margin-bottom: 20px;
}
.breadcrumb-title{
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
<!-- 登录 -->
<template>
  <div class="login-wrap">
    <el-form label-position="left" :model="userForm" :rules="rules" ref="userForm" label-width="0px" class="demo-userForm login-container">
      <h3 class="title">数字化手术室综合管理系统</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="userForm.username" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="userForm.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="code">
            <el-input type="text" v-model="userForm.code" auto-complete="off" placeholder="图形验证码" @keyup.enter.native="submitUser('userForm')"></el-input>
          </el-form-item>
        </el-col> 
        <el-col :span="12" class="code-box">
          <img :src="userForm.codeimg" alt="" class="codeimg" @click="getcode()">
        </el-col>
      </el-row>
      <el-checkbox class="remember" v-model="rememberpwd">记住密码</el-checkbox>
      <el-form-item style="width:100%;margin:0 auto">
        <el-button type="primary" style="width:40%; margin-right: 30px;" @click="submitUser('userForm')" :loading="logining">登录</el-button>
        <el-button style="width:40%;" @click="resetForm">重置</el-button> 
        <el-link type="text" @click="passwordReset">忘记密码？</el-link>   
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="passwordVisible" title="重置密码">
      <el-form
        :model="passwordResetForm"
        :rules="passwordResetRules"
        ref="passwordResetForm"
        label-width="120px"
      >
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            type="password"
            v-model="passwordResetForm.newPassword"
            placeholder="请输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            type="password"
            v-model="passwordResetForm.confirmPassword"
            placeholder="请再次输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlePasswordResetSubmit"
            >提交</el-button
          >
          <el-button @click="passwordResetVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
import { login } from '../api/userMG'
import { setCookie, getCookie, delCookie } from '../utils/util'
import md5 from 'js-md5'
export default {
  name: 'login',
  data() {
    return {
      //定义loading默认为false
      logining: false,
      // 记住密码
      rememberpwd: false,
      userForm: {
        //username和password默认为空
        username: '',
        password: '',
        code: '',
        randomStr: '',
        codeimg: ''
      },
      //rules前端验证
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      passwordVisible: false,
      passwordForm: {
        newPassword: "",
        confirmPassword: "",
      },
      passwordResetRules: {
        newPassword: [
          { 
            required: true,
             message: "请输入新密码",
              trigger: "blur" 
          },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
        confirmPassword: [
          { required: true, 
            message: "请再次输入新密码",
             trigger: "blur"
          },
          { 
            validator: this.validateConfirmPassword, 
            trigger: "blur" 
          },
        ],
      },
      passwordResetForm: {
        newPassword: "",
        confirmPassword: "",
      },
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.$message({
      message: '账号密码及验证码不为空即可',
      type: 'success'
    })
    // 获取图形验证码
    this.getcode()
    // 获取存在本地的用户名密码
    this.getpwd()
  },
  // 里面的函数只有调用才会执行
  methods: {
    // 获取用户名密码
    getpwd() {
      if (getCookie('user') != '' && getCookie('pwd') != '') {
        this.userForm.username = getCookie('user')
        this.userForm.password = getCookie('pwd')
        this.rememberpwd = true
      }
    },
    //获取info列表
    submitUser(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.logining = true
          // 测试通道，不为空直接登录
          setTimeout(() => {
            this.logining = false
            this.$store.commit('login', 'true')
            this.$router.push({ path: '/surgical/surgical' })
          }, 1000)
          // 正式环境
          login(this.userForm).then(res => {
            if (res.success) {
              if (this.rememberpwd) {
                //保存帐号到cookie，有效期7天
                setCookie('user', this.userForm.username, 7)
                //保存密码到cookie，有效期7天
                setCookie('pwd', this.userForm.password, 7)
              } else {
                delCookie('user')
                delCookie('pwd')
              }
              //如果请求成功就让他2秒跳转路由
              setTimeout(() => {
                this.logining = false
                // 缓存token
                localStorage.setItem('logintoken', res.data.token)
                // 缓存用户个人信息
                localStorage.setItem('userdata', JSON.stringify(res.data))
                this.$store.commit('login', 'true')
                this.$router.push({ path: '/surgical/surgical' })
              }, 1000)
            } else {
              this.$message.error(res.msg)
              this.logining = false
              return false
            }
          })
        } else {
          // 获取图形验证码
          this.getcode()
          this.$message.error('请输入用户名密码！')
          this.logining = false
          return false
        }
      })
    },
    //密码重置
    passwordReset() {
      this.passwordVisible = true;
    },
    resetForm() {
      this.$refs.loginForm.resetFields();
    },
  }
}
</script>
<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url('https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00278-673.jpg');
  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}
.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.remember {
  margin: 0px 0px 35px 0px;
}
.code-box {
  text-align: right;
}
.codeimg {
  height: 40px;
}
</style>
<!-- 左边导航菜单 -->
<template>
  <el-menu default-active="2" :collapse="collapsed" collapse-transition  router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b">
    <div class="logobox">
      数字化手术室综合管理系统
    </div>
    <el-submenu v-for="menu in allmenu" :key="menu.menuid" :index="menu.menuname">
      <template slot="title">
        <span>{{menu.menuname}}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item v-for="chmenu in menu.menus" :index="'/'+chmenu.url" :key="chmenu.menuid">
          <span>{{chmenu.menuname}}</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>
<script>
import { menu } from '../api/userMG'
export default {
  name: 'leftnav',
  data() {
    return {
      collapsed: false,
      allmenu: []
    }
  },
  created() {
    // 获取图形验证码
    let res = {
      success: true,
      // 右侧标题
      data: [
      {
          menuid: 150,
          icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
          menuname: '首页',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 159,
              icon: 'icon-provider-manage',
              menuname: '概览',
              hasThird: 'N',
              url: 'charts/thinking',
              menus: null
            }
          ]
        },
        {
          menuid: 1,
          icon: 'li-icon-xiangmuguanli',
          menuname: '手术室管理',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 2,
              icon: 'icon-cat-skuQuery',
              menuname: '手术室管理',
              hasThird: 'N',
              url: 'surgical/surgical',
              menus: null
            },
            {
              menuid: 3,
              icon: 'icon-cat-skuQuery',
              menuname: '手术室设备管理',
              hasThird: 'N',
              url: 'equipment/equipment',
              menus: null
            },
            {
              menuid: 4,
              icon: 'icon-cat-skuQuery',
              menuname: '手术室预约管理',
              hasThird: 'N',
              url: 'booking/booking',
              menus: null
            }
          ]
        },
        {
          menuid: 33,
          icon: 'li-icon-dingdanguanli',
          menuname: '手术中心',
          hasThird: null,
          url: null,
          menus: [
          {
              menuid: 159,
              icon: 'icon-provider-manage',
              menuname: '手术室录像管理',
              hasThird: 'N',
              url: 'videoReplay/videoReplay',
              menus: null
            },
            {
              menuid: 160,
              icon: 'icon-order-manage',
              menuname: '手术进度',
              hasThird: 'N',
              url: 'charts/schedule',
              menus: null
            },
          ]
        },
        {
          menuid: 71,
          icon: 'li-icon-xitongguanli',
          menuname: '用户管理',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 72,
              icon: 'icon-cus-manage',
              menuname: '用户管理',
              hasThird: 'N',
              url: 'system/user',
              menus: null
            },
            {
              menuid: 73,
              icon: 'icon-news-manage',
              menuname: '角色管理',
              hasThird: 'N',
              url: 'system/Role',
              menus: null
            },
          ]
        },
        {
          menuid: 128,
          icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
          menuname: '系统管理',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 129,
              icon: 'icon-provider-manage',
              menuname: '通知公告管理',
              hasThird: 'N',
              url: 'channel/notice',
              menus: null
            },
          ]
        },
      ],
      msg: 'success'
    }
          this.allmenu = res.data
    // 正式环境用接口查询
    menu(localStorage.getItem('logintoken'))
      .then(res => {
        console.log(JSON.stringify(res))
        if (res.success) {
          this.allmenu = res.data
        } else {
          this.$message.error(res.msg)
          return false
        }
      })
      .catch(err => {
        this.$message.error('数据加载失败，请稍后再试！')
      })
    // 监听
    this.$root.Bus.$on('toggle', value => {
      this.collapsed = !value
    })
  }
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}
.el-menu-item-group__title {
  padding: 0px;
}
.el-menu-bg {
  background-color: #1f2d3d !important;
}
.el-menu {
  border: none;
}
.logobox {
  height: 40px;
  line-height: 40px;
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  padding: 20px 0px;
}
.logoimg {
  height: 40px;
}
</style>
<!-- 手术室管理 -->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: 'surgical/surgical' }">手术室管理</el-breadcrumb-item>
      <el-breadcrumb-item>手术室管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="surgeryInline" class="surgery-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="surgeryInline.roomNumber" placeholder="输入手术室名称"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="surgeryInline.deptNo" placeholder="输入手术室编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="surgeryEdit()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="surgeryRooms" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 95.2%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column  align="center" prop="roomNumber" label="手术室编号" width="200">
      </el-table-column>
      <el-table-column   align="center" prop="roomName" label="手术室名称" width="200">
      </el-table-column>
      <el-table-column   align="center" prop="bookingStatus" label="预约状态" width="100">
      </el-table-column>
      <el-table-column  align="center" prop="usageStatus" label="使用状态" width="100">
      </el-table-column>
      <el-table-column align="center"  prop="surgeryType" label="手术类型" width="200">
      </el-table-column>
      <el-table-column  align="center" prop="surgeryTime" label="手术时间" width="260">
        <template slot-scope="scope">
          <div>{{scope.row.surgeryTime}}</div> 
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="surgeryEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deletesurgery(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="surgeryFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="surgeryForm" :rules="rules" ref="surgeryForm">
        <el-form-item label="手术室编号" prop="roomNumber">
          <el-input size="small" v-model="surgeryForm.roomNumber" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="手术室名称" prop="roomName">
          <el-input size="small" v-model="surgeryForm.roomName" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="预约状态" prop="bookingStatus">
          <el-input size="small" v-model="surgeryForm.bookingStatus" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="使用状态" prop="usageStatus">
          <el-input size="small" v-model="surgeryForm.usageStatus" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="手术类型" prop="surgeryType">
          <el-input size="small" v-model="surgeryForm.surgeryType" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="手术时间" prop="surgeryTime">
          <el-input size="small" v-model="surgeryForm.surgeryTim" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('surgeryForm')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { surgeryRoom, deptSave, deptDelete } from '../../api/basisMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      surgeryFormVisible: false, //控制编辑页面显示与隐藏
      title: '添加',
      surgeryForm: {
        roomNumber: '', 
        roomName: '',
        bookingStatus: '',
        usageStatus: '', 
        surgeryType: '', 
        surgeryTime: '' ,
        token: localStorage.getItem('logintoken')
      },
      // rules表单验证
      rules: {
       className: [
          { required: true, message: '请输入手术室名称', trigger: 'blur' }
        ],
       roomNumber: [{ required: true, message: '请输入手术室编号', trigger: 'blur' }]
      },
      surgeryInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },
      // 删除部门
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      surgeryRooms: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 数据发生改变
   */
  created() {
    this.getdata(this.surgeryInline)
  },
  methods: {
    // 获取数据列表
    getdata(parameter) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 35,
        data: [
        { 
          id:1,
          roomNumber: 'S001', 
          roomName: '第一手术室',
          bookingStatus: '已预约',
          usageStatus: '占用中', 
          surgeryType: '心脏搭桥手术', 
          surgeryTime: '08:00-12:00' 
        },
        { 
          id:2,
          roomNumber: 'S002', 
          roomName: '第二手术室', 
          bookingStatus: '未预约',
          usageStatus: '空闲', 
          surgeryType: '预留', 
          surgeryTime: '-' 
        }, 
        { 
            id:3,
            roomNumber: 'S003', 
            roomName: '第三手术室',
            bookingStatus: '已预约',
            usageStatus: '占用中',
            surgeryType: '神经外科手术', 
            surgeryTime: '09:00-14:00' 
          }, 
        {
          id:4,
          roomNumber: 'S004',
          roomName: '第四手术室', 
          bookingStatus: '已预约',
          usageStatus: '占用中', 
          surgeryType: '骨科手术', 
          surgeryTime: '10:00-16:00'
         }, 
        { 
          id:5,
          roomNumber: 'S005', 
          roomName: '第五手术室', 
          bookingStatus: '未预约', 
          usageStatus: '空闲', 
          surgeryType: '预留', 
          surgeryTime: '-' 
        }, 
        { 
          id:6,
          roomNumber: 'S006', 
          roomName: '第六手术室', 
          bookingStatus: '已预约', 
          usageStatus: '占用中', 
          surgeryType: '整形手术', 
          surgeryTime: '11:00-13:00'
         },
         { 
           id:7,
           roomNumber: 'S007', 
           roomName: '第七手术室',
           bookingStatus: '已预约', 
           usageStatus: '占用中', 
           surgeryType: '妇产科手术', 
           surgeryTime: '13:00-17:00'
           }, 
         { 
           id:8,
           roomNumber: 'S008', 
           roomName: '第八手术室',
           bookingStatus: '未预约', 
           usageStatus: '空闲', 
           surgeryType: '预留', 
           surgeryTime: '-' 
          }, 
         { 
           id:9,
           roomNumber: 'S009', 
           roomName: '第九手术室',
           bookingStatus: '已预约', 
           usageStatus: '占用中', 
           surgeryType: '眼科手术', 
           surgeryTime: '07:00-11:00'
           }, 
        { 
           id:10,
           roomNumber: 'S010',
           roomName: '第十手术室', 
           bookingStatus: '未预约', 
           usageStatus: '空闲', 
           surgeryType: '耳鼻喉手术', 
           surgeryTime: '-' 
          } 
        ]
      }
      this.loading = false
      this.surgeryRooms = res.data
      this.pageparm.currentPage = this.surgeryInline.page
      this.pageparm.pageSize = this.surgeryInline.limit
      this.pageparm.total = res.count
      // 测试环境  模拟数据结束  
      /***
       *  正式环境环境 调用接口
       */
       surgeryRoom(parameter)
        .then(res => {
          this.loading = false
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.surgeryRooms = res.data
            // 分页赋值
            this.pageparm.currentPage = this.surgeryInline.page
            this.pageparm.pageSize = this.surgeryInline.limit
            this.pageparm.total = res.count
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('加载失败，请稍后再试！')
        })
    },
    // 分页插件事件
    callFather(parm) {
      this.surgeryInline.page = parm.currentPage
      this.surgeryInline.limit = parm.pageSize
      this.getdata(this.surgeryInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.surgeryInline)
    },
    //添加、编辑
    surgeryEdit: function(index, row) {
      this.surgeryFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改'
        this.surgeryForm.roomNumber = row.roomNumber
        this.surgeryForm.roomName = row.roomName
        this.surgeryForm.bookingStatus = row.bookingStatus
        this.surgeryForm.usageStatus = row.usageStatus
        this.surgeryForm.surgeryType = row.surgeryType
        this.surgeryForm.surgeryTime = row.surgeryTime
      } else {
        this.title = '添加'
        this.surgeryForm.roomNumber = ''
        this.surgeryForm.roomName = ''
        this.surgeryForm.bookingStatus = ''
        this.surgeryForm.usageStatus=''
        this.surgeryForm.surgeryType =''
        this.surgeryForm.surgeryTime=''
      }
    },
    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          deptSave(this.surgeryForm)
            .then(res => {
              this.surgeryFormVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.surgeryInline)
                this.$message({
                  type: 'success',
                  message: '手术室保存成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.surgeryFormVisible = false
              this.loading = false
              this.$message.error('手术室保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    // 删除手术室
    deletesurgery(index, row) {
      this.$confirm(`确定要删除《${row.className}》手术室吗?`, '删除手术室', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deptDelete(row.roomNumber)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '手术室已删除!'
                })
                this.getdata(this.surgeryInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('手术室删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.surgeryFormVisible = false
    }
  }
}
</script>
<style scoped>
.surgery-search {
  margin-top: 20px;
}
</style>
<!-- 手术室设备管理 -->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: 'surgical/surgical' }">手术室管理</el-breadcrumb-item>
      <el-breadcrumb-item>手术室设备管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="surgeryInline" class="device-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="surgeryInline.deviceName" placeholder="输入设备名称"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="surgeryInline.deptNo" placeholder="型号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="deviceEdit()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="surgeryDevices" highlight-current-row v-loading="loading" border element-loading-text="数据加载中......" style="width:100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column  align="center" prop="deviceName" label="设备名称" width="200">
      </el-table-column>
      <el-table-column   align="center" prop="deviceModel" label="型号" width="200">
      </el-table-column>
      <el-table-column   align="center" prop="status" label="状态" width="100">
      </el-table-column>
      <el-table-column  align="center" prop="bookingStatus" label="预约情况" width="100">
      </el-table-column>
      <el-table-column align="center"  prop="usageDate" label="使用日期" width="200">
      </el-table-column>
      <el-table-column  align="center" prop="maintenanceRecord" label="维护记录" width="200">
        <template slot-scope="scope">
          <div>{{scope.row.maintenanceRecord}}</div> 
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="deviceEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteDevice(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="DeviceDeviceVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="DeviceDevice" :rules="rules" ref="DeviceDevice">
        <el-form-item label="设备名称" prop="deviceName">
          <el-input size="small" v-model="DeviceDevice.deviceName" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="型号" prop="deviceModel">
          <el-input size="small" v-model="DeviceDevice.deviceModel" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-input size="small" v-model="DeviceDevice.status" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="预约情况" prop="bookingStatus">
          <el-input size="small" v-model="DeviceDevice.bookingStatus" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="使用日期" prop="usageDate">
          <el-input size="small" v-model="DeviceDevice.usageDate" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="维护记录" prop="maintenanceRecord">
          <el-input size="small" v-model="DeviceDevice.surgeryTim" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitDevice('DeviceDevice')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { surgeryDevice, deptSave, deptDelete } from '../../api/basisMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      DeviceDeviceVisible: false, //控制编辑页面显示与隐藏
      title: '添加',
      DeviceDevice: {
        deviceName: '', 
        deviceModel: '',
        status: '',
        bookingStatus: '', 
        usageDate: '', 
        maintenanceRecord: '' ,
        token: localStorage.getItem('logintoken')
      },
      // rules表单验证
      rules: {
        deviceName: [
          { required: true, message: '请输入设备名称', trigger: 'blur' }
        ],
        deviceModel: [{ required: true, message: '请输入型号', trigger: 'blur' }]
      },
      surgeryInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },
      // 删除部门
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      surgeryDevices: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  created() {
    this.getdata(this.surgeryInline)
  },
  methods: {
    // 获取数据列表
    getdata(parameter) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 50,
        data: [
        {  
        deviceName: '手术无影灯',  
        deviceModel: 'DL-1001',  
        status: '正常',  
        bookingStatus: '已预约',  
        usageDate: '2024-04-02',  
        usageDuration: '4小时',  
        maintenanceRecord: '上次维护：2024-03-25'  
      },  
      {  
        deviceName: '麻醉机',  
        deviceModel: 'MZ-5000',  
        status: '正常',  
        bookingStatus: '已预约',  
        usageDate: '2024-04-03',  
        usageDuration: '3小时',  
        maintenanceRecord: '上次维护：2024-04-01，下次维护计划：2024-06-01'  
      },  
      {  
        deviceName: '高频电刀',  
        deviceModel: 'GD-8000',  
        status: '正常',  
        bookingStatus: '未预约',  
        usageDate: '-',  
        usageDuration: '-',  
        maintenanceRecord: '上次维护：2024-03-15'  
      },  
      {  
        deviceName: '心电监护仪',  
        deviceModel: 'ECG-600',  
        status: '正常',  
        bookingStatus: '已预约',  
        usageDate: '2024-04-05',  
        usageDuration: '6小时',  
        maintenanceRecord: '无'  
      },  
      {  
        deviceName: '呼吸机',  
        deviceModel: 'RES-9000',  
        status: '正常',  
        bookingStatus: '已预约',  
        usageDate: '2024-04-07',  
        usageDuration: '5小时',  
        maintenanceRecord: '上次维护：2024-02-28'  
      },  
      {  
        deviceName: '输液泵',  
        deviceModel: 'IVP-400',  
        status: '正常',  
        bookingStatus: '未预约',  
        usageDate: '-',  
        usageDuration: '-',  
        maintenanceRecord: '上次维护：2024-01-10，下次维护计划：2024-05-10'  
      },  
      {  
        deviceName: '显微镜',  
        deviceModel: 'OPT-2000',  
        status: '正常',  
        bookingStatus: '已预约',  
        usageDate: '2024-04-09',  
        usageDuration: '4小时',  
        maintenanceRecord: '上次维护：2023-12-30'  
      },  
      {  
        deviceName: '腹腔镜',  
        deviceModel: 'LAP-7000',  
        status: '维护中',  
        bookingStatus: '未预约',  
        usageDate: '-',  
        usageDuration: '-',  
        maintenanceRecord: '正在维护：2024-04-01至2024-04-04'  
      },  
      {  
        deviceName: 'C型臂X光机',  
        deviceModel: 'CARM-550',  
        status: '正常',  
        bookingStatus: '已预约',  
        usageDate: '2024-04-10',  
        usageDuration: '3小时',  
        maintenanceRecord: '上次维护：2024-04-08'  
      },  
      {  
        deviceName: '手术床',  
        deviceModel: 'OPB-120',  
        status: '正常',  
        bookingStatus: '未预约',  
        usageDate: '-',  
        usageDuration: '-',  
        maintenanceRecord: '无'  
      }  
        ]
      }
      this.loading = false
      this.surgeryDevices = res.data
      this.pageparm.currentPage = this.surgeryInline.page
      this.pageparm.pageSize = this.surgeryInline.limit
      this.pageparm.total = res.count
      // 测试环境  模拟数据结束  
      /***
       *  正式环境环境 调用接口
       */
       surgeryDevice(parameter)
        .then(res => {
          this.loading = false
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.surgeryDevices = res.data
            // 分页赋值
            this.pageparm.currentPage = this.surgeryInline.page
            this.pageparm.pageSize = this.surgeryInline.limit
            this.pageparm.total = res.count
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('加载失败，请稍后再试！')
        })
    },
    // 分页插件事件
    callFather(parm) {
      this.surgeryInline.page = parm.currentPage
      this.surgeryInline.limit = parm.pageSize
      this.getdata(this.surgeryInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.surgeryInline)
    },
    //显示编辑界面
    deviceEdit: function(index, row) {
      this.DeviceDeviceVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改'
        this.DeviceDevice.deviceName = row.deviceName
        this.DeviceDevice.deviceModel = row.deviceModel
        this.DeviceDevice.status = row.status
        this.DeviceDevice.bookingStatus = row.bookingStatus
        this.DeviceDevice.usageDate = row.usageDate
        this.DeviceDevice.maintenanceRecord = row.maintenanceRecord
      } else {
        this.title = '添加'
        this.DeviceDevice.deviceName = ''
        this.DeviceDevice.deviceModel = ''
        this.DeviceDevice.status = ''
        this.DeviceDevice.bookingStatus=''
        this.DeviceDevice.usageDate =''
        this.DeviceDevice.maintenanceRecord=''
      }
    },
    // 编辑、增加页面保存方法
    submitDevice(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          deptSave(this.DeviceDevice)
            .then(res => {
              this.DeviceDeviceVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.surgeryInline)
                this.$message({
                  type: 'success',
                  message: '手术室设备保存成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.DeviceDeviceVisible = false
              this.loading = false
              this.$message.error('手术室设备保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    // 删除手术室设备
    deleteDevice(index, row) {
      this.$confirm(`确定要删除手术室设备吗?`, '删除手术室设备', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deptDelete(row.deviceName)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '手术室设备已删除!'
                })
                this.getdata(this.surgeryInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('手术室设备删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.DeviceDeviceVisible = false
    }
  }
}
</script>
<style scoped>
.device-search {
  margin-top: 20px;
}
</style>
<!-- 手术室预约管理 -->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: 'surgical/surgical' }">手术室管理</el-breadcrumb-item>
      <el-breadcrumb-item>手术室预约管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="bookingInline" class="booking-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="bookingInline.doctorName" placeholder="手术室编号"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="bookingInline.deptNo" placeholder="手术日期"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="bookingEdit()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="surgerySchedule" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 95.2%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column  align="center" prop="roomNumber" label="手术室编号" width="200">
      </el-table-column>
      <el-table-column   align="center" prop="date" label="手术日期" width="200">
      </el-table-column>
      <el-table-column   align="center" prop="startTime" label="手术开始时间" width="100">
      </el-table-column>
      <el-table-column  align="center" prop="endTime" label="手术结束时间" width="100">
      </el-table-column>
      <el-table-column align="center"  prop="doctorName" label="预约医生" width="200">
      </el-table-column>
      <el-table-column  align="center" prop="status" label="预约状态" width="200">
      </el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="bookingEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deletebooking(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="bookingVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="booking" :rules="rules" ref="booking">
        <el-form-item label="设备名称" prop="doctorName">
          <el-input size="small" v-model="booking.doctorName" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="型号" prop="roomNumber">
          <el-input size="small" v-model="booking.roomNumber" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-input size="small" v-model="booking.status" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="预约情况" prop="bookingStatus">
          <el-input size="small" v-model="booking.bookingStatus" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="使用日期" prop="usageDate">
          <el-input size="small" v-model="booking.usageDate" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="维护记录" prop="maintenanceRecord">
          <el-input size="small" v-model="booking.surgeryTim" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitFormBooking('booking')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { surgeryBooking, deptSave, deptDelete } from '../../api/basisMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      bookingVisible: false, //控制编辑页面显示与隐藏
      title: '添加',
      booking: {
        roomNumber: '', 
         date: '', 
         startTime: '', 
         endTime: '', 
         doctorName: '张医生', 
         status: '已确认',
        token: localStorage.getItem('logintoken')
      },
      // rules表单验证
      rules: {
        doctorName: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        roomNumber: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      bookingInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },
      // 删除部门
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      surgerySchedule: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  created() {
    this.getdata(this.bookingInline)
  },
  methods: {
    // 获取数据列表
    getdata(parameter) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 21,
        data: [
        { 
         roomNumber: 'S101', 
         date: '2024-04-01', 
         startTime: '08:30', 
         endTime: '10:30', 
         doctorName: '张医生', 
         status: '已确认'
         },  
        { 
          roomNumber: 'S102',
           date: '2024-04-02', 
           startTime: '09:00', 
           endTime: '12:00', 
           doctorName: '李医生', 
           status: '已确认' 
          },  
        { 
          roomNumber: 'S101', 
          date: '2024-04-03', 
          startTime: '13:30', 
          endTime: '16:00', 
          doctorName: '王医生', 
          status: '待确认' 
        },  
        { 
          roomNumber: 'S103', 
          date: '2024-04-04', 
          startTime: '07:45', 
          endTime: '10:15', 
          doctorName: '赵医生', 
          status: '已确认' 
        },  
        { 
          roomNumber: 'S102', 
          date: '2024-04-05', 
          startTime: '14:00', 
          endTime: '17:00', 
          doctorName: '张医生', 
          status: '已取消' 
        },  
        { 
          roomNumber: 'S101', 
          date: '2024-04-06', 
          startTime: '09:30', 
          endTime: '12:30', 
          doctorName: '李医生', 
          status: '已确认' 
        },  
        { 
          roomNumber: 'S103', 
          date: '2024-04-07', 
          startTime: '10:15', 
          endTime: '13:00', 
          doctorName: '王医生', 
          status: '已确认' 
        },  
        { 
          roomNumber: 'S102', 
          date: '2024-04-08', 
          startTime: '15:00', 
          endTime: '18:00', 
          doctorName: '赵医生', 
          status: '待确认'
         },  
        { 
          roomNumber: 'S101', 
          date: '2024-04-09', 
          startTime: '08:00', 
          endTime: '11:00', 
          doctorName: '张医生', 
          status: '已确认' 
        },  
        { 
          roomNumber: 'S103', 
          date: '2024-04-10', 
          startTime: '11:30', 
          endTime: '14:00',
           doctorName: '李医生', 
           status: '已确认' 
          },  
        ]
      }
      this.loading = false
      this.surgerySchedule = res.data
      this.pageparm.currentPage = this.bookingInline.page
      this.pageparm.pageSize = this.bookingInline.limit
      this.pageparm.total = res.count
      // 测试环境  模拟数据结束  
      /***
       *  正式环境环境 调用接口
       */
       surgeryBooking(parameter)
        .then(res => {
          this.loading = false
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.surgerySchedule = res.data
            // 分页赋值
            this.pageparm.currentPage = this.bookingInline.page
            this.pageparm.pageSize = this.bookingInline.limit
            this.pageparm.total = res.count
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('加载失败，请稍后再试！')
        })
    },
    // 分页插件事件
    callFather(parm) {
      this.bookingInline.page = parm.currentPage
      this.bookingInline.limit = parm.pageSize
      this.getdata(this.bookingInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.bookingInline)
    },
    //编辑,新增
    bookingEdit: function(index, row) {
      this.bookingVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '编辑'
        this.booking.doctorName = row.doctorName
        this.booking.roomNumber = row.roomNumber
        this.booking.status = row.status
        this.booking.bookingStatus = row.bookingStatus
        this.booking.usageDate = row.usageDate
        this.booking.maintenanceRecord = row.maintenanceRecord
      } else {
        this.title = '新增'
        this.booking.doctorName = ''
        this.booking.roomNumber = ''
        this.booking.status = ''
        this.booking.bookingStatus=''
        this.booking.usageDate =''
        this.booking.maintenanceRecord=''
      }
    },
    // 编辑、增加页面保存方法
    submitFormBooking(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          deptSave(this.booking)
            .then(res => {
              this.bookingVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.bookingInline)
                this.$message({
                  type: 'success',
                  message: '手术室预约成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.bookingVisible = false
              this.loading = false
              this.$message.error('手术室预约保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    // 删除手术室预约
    deletebooking(index, row) {
      this.$confirm(`确定要删除手术室预约吗?`, '删除手术室预约', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deptDelete(row.doctorName)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '手术室预约已删除!'
                })
                this.getdata(this.bookingInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('手术室预约删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关闭弹出框
    closeDialog() {
      this.bookingVisible = false
    }
  }
}
</script>
<style scoped>
.booking-search {
  margin-top: 30px;
}
</style>
 <!--  用户管理-->
<template>
  <div>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-select size="small" v-model="formInline.isLock" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="正常" value="N"></el-option>
          <el-option label="已锁定" value="Y"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="formInline.userName" placeholder="输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="formInline.userMobile" placeholder="输入手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="userEdit()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" @selection-change="selectChange" :data="userData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="50">
      </el-table-column>
      <!-- <el-table-column align="center" sortable prop="deptName" label="公司" width="120">
      </el-table-column> -->
      <el-table-column align="center" sortable prop="userName" label="用户名" width="120">
      </el-table-column>
      <el-table-column align="center" sortable prop="userRole" label="角色" width="120">
      </el-table-column>
      <el-table-column align="center" sortable prop="userMobile" label="手机号" width="120">
      </el-table-column>
      <el-table-column align="center" sortable prop="userSex" label="性别" min-width="50">
      </el-table-column>
      <el-table-column align="center" sortable prop="userEmail" label="邮件" min-width="120">
      </el-table-column>
      <el-table-column align="center" sortable prop="editTime" label="修改时间" min-width="120">
        <template slot-scope="scope">
          <!-- <div>{{scope.row.editTime|timestampToTime}}</div> -->
          <div>{{scope.row.editTime}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" sortable prop="isLock" label="状态" min-width="50">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isLock=='N'?nshow:fshow" active-color="#13ce66" inactive-color="#ff4949" @change="editType(scope.$index, scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="userEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='closeDialog("edit")'>
      <el-form label-width="80px" ref="editForm" :model="editForm" :rules="rules">
        <el-form-item label="用户名" prop="userName">
          <el-input size="small" v-model="editForm.userName" auto-complete="off" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="userRole">
          <el-input size="small" v-model="editForm.userRole" auto-complete="off" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="userMobile">
          <el-input size="small" v-model="editForm.userMobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮件" prop="userEmail">
          <el-input size="small" v-model="editForm.userEmail" placeholder="请输入邮箱地址"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="userSex">
          <el-radio v-model="editForm.userSex" label="男">男</el-radio>
          <el-radio v-model="editForm.userSex" label="女">女</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 导入请求方法
import {
  userList,
  userSave,
  userDelete,
  userPwd,
  UserDeptdeptTree,
  UserChangeDept
} from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      title: '添加用户',
      editFormVisible: false, //控制编辑页面显示与隐藏
      // 编辑与添加
      editForm: {
        userId: '',
        userName: '',
        userRole: '',
        roleId: '',
        userMobile: '',
        userEmail: '',
        userSex: '',
        token: localStorage.getItem('logintoken')
      },
      // 参数
      unitparm: {
        userIds: '',
        deptId: '',
        deptName: ''
      },
      // 选择数据
      selectdata: [],
      // rules表单验证
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        userRole: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        roleId: [{ required: true, message: '请选择角色', trigger: 'blur' }],
        userMobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1(3\d|47|5((?!4)\d)|7(0|1|[6-8])|8\d)\d{8,8}$/,
            required: true,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        userEmail: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            required: true,
            message: '请输入正确的邮箱',
            trigger: 'blur'
          }
        ],
        userSex: [{ required: true, message: '请选择性别', trigger: 'blur' }]
      },
      // 删除用户
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      // 重置密码
      resetpsd: {
        userId: '',
        token: localStorage.getItem('logintoken')
      },
      // 用户下线
      offline: {
        token: localStorage.getItem('logintoken')
      },
      // 请求数据参数
      formInline: {
        page: 1,
        limit: 10,
        deptId: '',
        userName: '',
        userMobile: '',
        isLock: ''
      },
      //用户数据
      userData: [],
      // 数据权限
      UserDept: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 选中
      checkmenu: [],
      //参数role
      saveroleId: '',
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize:5,
        total:5
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  watch: {},
  created() {
    this.getdata(this.formInline)
  },
  methods: {
    // 获取数据方法
    getdata(parameter) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count:5,
        data: [
          {
            addUser: '1',
            editUser: '1',
            addTime: null,
            editTime: "2024年03月01日",
            userId: 1,
            systemNo: 'pmd',
            userName: 'admin',
            userPassword: 'e10adc3949ba59abbe56e057f20f883e',
            userRole: '高级管理员',
            userSex: '女',
            userMobile: '138-xxxx-xxxx',
            userEmail: '111@qq.com',
            isLock: 'N',
            deptId: 1,
            deptName: 'xxxx',
            roleId: 1
          },
          {
            addUser: '1',
            editUser: '1',
            addTime: null,
            editTime: "2024年03月17日",
            userId: 3,
            systemNo: 'mc',
            userName: 'zhangdan',
            userPassword: 'e10adc3949ba59abbe56e057f20f883e',
            userRole: '系统管理员',
            userSex: 'M',
            userMobile: '186-xxxx-xxxx',
            userEmail: '222@qq.com',
            isLock: 'N',
            deptId: 2,
            deptName: 'xxxx',
            roleId: 101
          },
          {
            addUser: '1',
            editUser: '4',
            addTime: null,
            editTime: "2024年03月20日",
            userId: 4,
            systemNo: 'ec',
            userName: '莉莉',
            userPassword: '59ba8b7dda9ff79186311a5a9fa155ca',
            userRole: '用户',
            userSex: '女',
            userMobile: '134-xxxx-xxxx',
            userEmail: 'huangxuekun@founder.com',
            isLock: 'N',
            deptId: 2,
            deptName: 'xxxx',
            roleId: 3
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526275128000,
            editTime: "2024年03月22日",
            userId: 28,
            systemNo: null,
            userName: '初晴',
            userPassword: 'e10adc3949ba59abbe56e057f20f883e',
            userRole: '用户',
            userSex: '男',
            userMobile: '158-xxxx-xxxx',
            userEmail: 'chuqi@qq.com',
            isLock: 'N',
            deptId: 4,
            deptName: 'zxxxxx',
            roleId: 1
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526275128000,
            editTime: "2024年03月01日",
            userId: 28,
            systemNo: null,
            userName: '萌萌',
            userPassword: 'e10adc3949ba59abbe56e057f20f883e',
            userRole: '用户',
            userSex: '女',
            userMobile: '135-xxxx-xxxx',
            userEmail: 'mengmeng@qq.com',
            isLock: 'N',
            deptId: 4,
            deptName: 'zxxxxx',
            roleId: 1
          },
        ]
      }
      this.loading = false
      this.userData = res.data
      // 分页赋值
      this.pageparm.currentPage = this.formInline.page
      this.pageparm.pageSize = this.formInline.limit
      this.pageparm.total = res.count
      // 测试环境  模拟数据结束  
      /***
       *  正式环境环境 调用接口
       */
      // 获取用户列表
      userList(parameter).then(res => {
        this.loading = false
        if (res.success == false) {
          this.$message({
            type: 'info',
            message: res.msg
          })
        } else {
          this.userData = res.data
          // 分页赋值
          this.pageparm.currentPage = this.formInline.page
          this.pageparm.pageSize = this.formInline.limit
          this.pageparm.total = res.count
        }
      })
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    //搜索事件
    search() {
      this.getdata(this.formInline)
    },
    // 修改type
    editType: function(index, row) {
      this.loading = true
      let parm = {
        lock: '',
        userId: '',
        token: localStorage.getItem('logintoken')
      }
      parm.userId = row.userId
      let lock = row.isLock
      if (lock == 'N') {
        parm.lock = 'Y'
      } else {
        parm.lock = 'N'
      }
      // 修改状态
      userLock(parm).then(res => {
        this.loading = false
        if (res.success == false) {
          this.$message({
            type: 'info',
            message: res.msg
          })
        } else {
          this.$message({
            type: 'success',
            message: '状态修改成功'
          })
          this.getdata(this.formInline)
        }
      })
    },
    //显示编辑界面
    userEdit: function(index, row) {
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改用户'
        this.editForm.userId = row.userId
        this.editForm.userName = row.userName
        this.editForm.userRole = row.userRole
        this.editForm.roleId = row.roleId
        this.editForm.userMobile = row.userMobile
        this.editForm.userEmail = row.userEmail
        this.editForm.userSex = row.userSex
      } else {
        this.title = '添加用户'
        this.editForm.userId = ''
        this.editForm.userName = ''
        this.editForm.userRole = ''
        this.editForm.roleId = ''
        this.editForm.userMobile = ''
        this.editForm.userEmail = ''
        this.editForm.userSex = ''
      }
    },
    // 编辑、添加提交方法
    submitForm(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          // 请求方法
          userSave(this.editForm)
            .then(res => {
              this.editFormVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.formInline)
                this.$message({
                  type: 'success',
                  message: '数据保存成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.editFormVisible = false
              this.loading = false
              this.$message.error('保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    // 显示部门设置
    handleunit: function(index, row) {
      this.unitAccessshow = true
      let parms = 0
      UserDeptdeptTree(parms)
        .then(res => {
          if (res.data.success) {
            this.UserDept = this.changeArr(res.data.data)
          } else {
            this.$message({
              type: 'info',
              message: res.msg
            })
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('配置权限失败,请稍后再试！')
        })
    },
    handleClick(data, checked, node) {
      if (checked) {
        this.$refs.tree.setCheckedNodes([])
        this.$refs.tree.setCheckedNodes([data])
        this.unitparm.deptId = data.id
        this.unitparm.deptName = data.name
        //交叉点击节点
      } else {
      }
    },
    // 保存部门
    unitPermSave() {
      let len = this.selectdata
      let ids = []
      if (len != 0) {
        for (let i = 0; i < len.length; i++) {
          ids.push(len[i].userId)
        }
      }
      this.unitparm.userIds = ids.join(',')
      UserChangeDept(this.unitparm)
        .then(res => {
          this.unitAccessshow = false
          if (res.success) {
            this.$message({
              type: 'success',
              message: '部门设置成功！'
            })
            this.getdata(this.formInline)
          } else {
            this.$message({
              type: 'info',
              message: res.msg
            })
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('部门设置失败,请稍后再试！')
        })
    },
    // 选择复选框事件
    selectChange(val) {
      this.selectdata = val
    },
    // 关闭编辑、增加弹出框
    closeDialog(dialog) {
      if (dialog == 'edit') {
        this.editFormVisible = false
      } else if (dialog == 'perm') {
        this.dataAccessshow = false
      } else if (dialog == 'unit') {
        this.unitAccessshow = false
      }
    },
    // 删除用户
    deleteUser(index, row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 删除
          userDelete(row.id)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '数据已删除!'
                })
                this.getdata(this.formInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('数据删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除！'
          })
        })
    },
    // 重置密码
    resetpwd(index, row) {
      this.resetpsd.userId = row.userId
      this.$confirm('确定要重置密码吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          userPwd(this.resetpsd)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '重置密码成功！'
                })
                this.getdata(this.formInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('重置密码失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消重置密码！'
          })
        })
    },
    //数据格式化
    changeArr(data) {
      var pos = {}
      var tree = []
      var i = 0
      while (data.length != 0) {
        if (data[i].pId == 0) {
          tree.push({
            id: data[i].id,
            name: data[i].name,
            pId: data[i].pId,
            open: data[i].open,
            checked: data[i].checked,
            children: []
          })
          pos[data[i].id] = [tree.length - 1]
          data.splice(i, 1)
          i--
        } else {
          var posArr = pos[data[i].pId]
          if (posArr != undefined) {
            var obj = tree[posArr[0]]
            for (var j = 1; j < posArr.length; j++) {
              obj = obj.children[posArr[j]]
            }
            obj.children.push({
              id: data[i].id,
              name: data[i].name,
              pId: data[i].pId,
              open: data[i].open,
              checked: data[i].checked,
              children: []
            })
            pos[data[i].id] = posArr.concat([obj.children.length - 1])
            data.splice(i, 1)
            i--
          }
        }
        i++
        if (i > data.length - 1) {
          i = 0
        }
      }
      return tree
    },
  }
}
</script>
<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>
<!-- 角色管理 -->
<template>
  <div>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.roleName" placeholder="输入角色名称"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="formInline.roleNo" placeholder="输入角色代码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="roleName" label="角色名称" width="300">
      </el-table-column>
      <el-table-column sortable prop="roleNo" label="角色代码" width="300">
      </el-table-column>
      <el-table-column sortable prop="editTime" label="修改时间" width="300">
        <template slot-scope="scope">
          <div>{{scope.row.editTime}}</div>
        </template>
      </el-table-column>
      <el-table-column sortable prop="editUser" label="修改人" width="300">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
          <el-button size="mini" type="success" @click="menuAccess(scope.$index, scope.row)">菜单权限</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='closeDialog("edit")'>
      <el-form label-width="120px" :model="editForm" ref="editForm" :rules="rules">
        <el-form-item label="系统编码" prop="systemNo">
          <el-input size="small" v-model="editForm.systemNo" auto-complete="off" placeholder="请输入系统编码"></el-input>
        </el-form-item>
        <el-form-item label="角色名称" prop="roleName">
          <el-input size="small" v-model="editForm.roleName" auto-complete="off" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色代码" prop="roleNo">
          <el-input size="small" v-model="editForm.roleNo" auto-complete="off" placeholder="请输入角色代码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>
    <!-- 菜单权限 -->
    <el-dialog title="菜单权限" :visible.sync="menuAccessshow" width="30%" @click='closeDialog("perm")'>
      <el-tree ref="tree" default-expand-all="" :data="RoleRight" :props="RoleRightProps" :default-checked-keys="checkmenu" node-key="id" show-checkbox>
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog("perm")'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="menuPermSave">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  roleList,
  roleSave,
  roleDelete,
  rolePwd,
  RoleRightTree,
  RoleRightSave
} from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      menuAccessshow: false, //控制数据权限显示与隐藏
      title: '添加',
      editForm: {
        roleId: '',
        systemNo: '',
        roleNo: '',
        roleName: '',
        token: localStorage.getItem('logintoken')
      },
      // rules 表单验证
      rules: {
        systemNo: [
          { required: true, message: '请输入系统编码', trigger: 'blur' }
        ],
        roleNo: [
          { required: true, message: '请输入角色代码', trigger: 'blur' }
        ],
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ]
      },
      formInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },
      // 删除
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      listData: [], //用户数据
      // 数据权限
      RoleRight: [],
      RoleRightProps: {
        children: 'children',
        label: 'name'
      },
      // 选中
      checkmenu: [],
      //参数role
      saveroleId: '',
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 数据发生改变
   */
  watch: {},
  created() {
    this.getdata(this.formInline)
  },
  methods: {
    // 获取角色列表
    getdata(parameter) {
      // 模拟数据
      let res = {
        code: 0,
        msg: null,
        count: 6,
        data: [
          {
            addUser: 'root',
            editUser: 'root',
            addTime: 1519182004000,
            editTime: '2024年03月01日',
            roleId: 1,
            systemNo: 'pmd',
            roleNo: 'Administrator',
            roleName: '高级管理员'
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1521111376000,
            editTime:'2024年03月01日',
            roleId: 2,
            systemNo: 'order',
            roleNo: 'admin',
            roleName: '系统管理员'
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1520678221000,
            editTime: '2024年03月01日',
            roleId: 95,
            systemNo: 'pm',
            roleNo: 'common',
            roleName: '普通用户'
          },
        ]
      }
      this.loading = false
      this.listData = res.data
      // 分页赋值
      this.pageparm.currentPage = this.formInline.page
      this.pageparm.pageSize = this.formInline.limit
      this.pageparm.total = res.count
      // 测试环境  模拟数据结束  
      /***
       *  正式环境环境 调用接口
       */
      roleList(parameter)
        .then(res => {
          this.loading = false
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.listData = res.data
            // 分页赋值
            this.pageparm.currentPage = this.formInline.page
            this.pageparm.pageSize = this.formInline.limit
            this.pageparm.total = res.count
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('获取角色列表失败，请稍后再试！')
        })
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline)
    },
    //显示编辑界面
    handleEdit: function(index, row) {
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改'
        this.editForm.roleId = row.roleId
        this.editForm.systemNo = row.systemNo
        this.editForm.roleNo = row.roleNo
        this.editForm.roleName = row.roleName
      } else {
        this.title = '添加'
        this.editForm.roleId = ''
        this.editForm.systemNo = ''
        this.editForm.roleNo = ''
        this.editForm.roleName = ''
      }
    },
    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          roleSave(this.editForm)
            .then(res => {
              this.editFormVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.formInline)
                this.$message({
                  type: 'success',
                  message: '角色保存成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.editFormVisible = false
              this.loading = false
              this.$message.error('角色保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    // 删除角色
    deleteUser(index, row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          roleDelete(row.roleId)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '角色已删除！'
                })
                this.getdata(this.formInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('角色删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 数据权限
    menuAccess: function(index, row) {
      this.menuAccessshow = true
      this.saveroleId = row.roleId
      RoleRightTree(row.roleId)
        .then(res => {
          if (res.data.success) {
            this.$message({
              type: 'success',
              message: '获取权限成功'
            })
            this.changemenu(res.data.data)
            this.RoleRight = this.changeArr(res.data.data)
          } else {
            this.$message({
              type: 'info',
              message: res.data.msg
            })
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('获取权限失败，请稍后再试！')
        })
    },
    // 选中菜单
    changemenu(arr) {
      let change = []
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].checked) {
          change.push(arr[i].id)
        }
      }
      this.checkmenu = change
    },
    // tree 递归
    changeArr(list) {
      var temptree = [],
        tree = [],
        items = []
      for (var i in list) {
        if (!temptree[list[i].id]) {
          var trow = {
            id: list[i].id,
            pId: list[i].pId,
            name: list[i].name,
            open: list[i].open,
            checked: list[i].checked,
            children: []
          }
          temptree[list[i].id] = trow
          items.push(trow)
        }
        if (list[i].uid > 0) {
          temptree[list[i].id]['children'].push({
            id: list[i].id,
            pId: list[i].pId,
            name: list[i].name,
            open: list[i].open,
            checked: list[i].checked,
            children: []
          })
        }
      }
      for (var j in items) {
        if (temptree[items[j].pId]) {
          temptree[items[j].pId]['children'].push(temptree[items[j].id])
        } else {
          tree.push(temptree[items[j].id])
        }
      }
      temptree = null
      items = null
      return tree
    },
    // 菜单权限-保存
    menuPermSave() {
      let parm = {
        roleId: this.saveroleId,
        moduleIds: ''
      }
      let node = this.$refs.tree.getCheckedNodes()
      let moduleIds = []
      if (node.length != 0) {
        for (let i = 0; i < node.length; i++) {
          moduleIds.push(node[i].id)
        }
        parm.moduleIds = JSON.stringify(moduleIds)
      }
      RoleRightSave(parm)
        .then(res => {
          if (res.success) {
            this.$message({
              type: 'success',
              message: '权限保存成功'
            })
            this.menuAccessshow = false
            this.getdata(this.formInline)
          } else {
            this.$message({
              type: 'info',
              message: res.msg
            })
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('权限保存失败，请稍后再试！')
        })
    },
    // 关闭编辑、增加弹出框
    closeDialog(dialog) {
      if (dialog == 'edit') {
        this.editFormVisible = false
      } else if (dialog == 'perm') {
        this.menuAccessshow = false
      }
    }
  }
}
</script>
<!-- 通知公告管理 -->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: 'channel/notice' }">系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>通知公告管理</el-breadcrumb-item>
    </el-breadcrumb> 
    <!--列表-->
    <el-table size="small" :data="noticeData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%; margin-top: 30px;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column align="center"  sortable center prop="className" label="标题" width="200">
      </el-table-column>
      <el-table-column align="center" sortable prop="content" label="内容" width="300">
      </el-table-column>
      <el-table-column align="center"  prop="editTime" label="生效时间" width="200">
      </el-table-column>
      <el-table-column align="center" sortable prop="classTeacher" label="发布人" width="200">
      </el-table-column>
      <el-table-column align="center" sortable prop="addTime" label="发布时间" width="200">
        <template slot-scope="scope">
          <div>{{scope.row.editTime}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="228">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleCheck(scope.$index, scope.row)">查看</el-button>
          <el-button size="mini" type="danger" @click="deleteNotice(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
  </div>
</template>
<script>
import { deptList, deptSave, deptDelete } from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editForm: {
        classID: '',
       className: '',
       classNo: '',
        token: localStorage.getItem('logintoken')
      },
      noticeInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },
      noticeData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  created() {
    this.getdata(this.noticeInline)
  },
  methods: {
    // 获取数据
    getdata(parameter) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 3,
        data: [
          {
            addTime: "2024年4月1日",
            editTime:'2024年4月1日',
            classID: 2,
            className: '系统维护通知',
            classNo: 'V001',
            content:'系统将于明晚进行维护，届时将暂停服务。',
            classTeacher: 'admin',
            classPeople: 7,
            parentId: 1
          },
          {
            addTime: "2024年3月1日",
            editTime:'2024年3月1日',
            classID: 3,
           className: '手术安排变更通知',
           classNo: 'J002',
           content:'明天第一台手术安排变更，请相关医生护士注意。',
           classTeacher: 'admin',
           classPeople: 10,
            parentId: 1
          },
          {
            addTime: "2024年4月1日",
            editTime:'2024年4月4日',
            classID: 12,
           className: '设备维护通知',
           classNo: 'J003',
           classTeacher: 'admin',
           classPeople: 6,
           content:'手术室B区设备将于明日进行维护，请提前安排。',
            parentId: 1
          },
          {
            addTime: "2024年5月1日",
            editTime:'2024年5月1日',
            classID: 12,
           className: '节假日安排通知',
           classNo: 'J003',
           classTeacher: 'admin',
           classPeople: 6,
           content:'我司将于五一假期期间放假，请提前安排好工作。',
            parentId: 1
          },
        ]
      }
      this.loading = false
      this.noticeData = res.data
      this.pageparm.currentPage = this.noticeInline.page
      this.pageparm.pageSize = this.noticeInline.limit
      this.pageparm.total = res.count
      // 测试环境  模拟数据结束  
      /***
       *  正式环境环境 调用接口
       */
      deptList(parameter)
        .then(res => {
          this.loading = false
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.noticeData = res.data
            // 分页赋值
            this.pageparm.currentPage = this.noticeInline.page
            this.pageparm.pageSize = this.noticeInline.limit
            this.pageparm.total = res.count
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('数据加载失败，请稍后再试！')
        })
    },
    // 分页插件事件
    callFather(parm) {
      this.noticeInline.page = parm.currentPage
      this.noticeInline.limit = parm.pageSize
      this.getdata(this.noticeInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.noticeInline)
    },
    //显示编辑界面
    handleCheck: function(index, row) {
      this.$router.push('/channel/notice/check')
    },
    deleteNotice(index,item){
      this.noticeData.splice(index,1)
    }
  }
}
</script>
<!-- 手术室录像管理 -->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: 'videoReplay/videoReplay' }">手术中心</el-breadcrumb-item>
      <el-breadcrumb-item>手术室录像管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" :model="bookingInline" class="surgery-search">
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="videoAdd()">添加</el-button>
      </el-form-item>
    </el-form>
    <div class="video-replay-list">
      <div v-for="(video, index) in videos" :key="index" class="video-card">
        <div class="card-header">
          <h3>{{ video.title }}</h3>
          <p>{{ video.date }}</p>
        </div>
        <div class="card-content">
          <p>{{ video.description }}</p>
        </div>
        <div class="card-footer">
          <button  class="play-button" @click="playVideo(video)">播放</button>
          <button class="delete-button" @click="deleteVideo(index, video)">删除</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { videoList, deptSave, deptDelete } from '../../api/userMG'
export default {
  data() {
    return {
      videoInline: {
        page: 1,
        limit: 12,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },
      videos: [], //录像列表
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 12,
        total: 12
      },
      video :{  
        title:'',  
        date: 'date',  
        description: '' 
    }
    }
  },
  created() {
    this.getdata(this.videoInline)
  },
  methods: {
    // 获取列表
    getdata(parameter) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 20,
        data: [
          {
            id: 1,
            title: '第一手术室录像',
            date: '2024-04-01',
            description: '第一手术室录像，详实记录手术全程'
          },
          {
            id: 2,
            title: '第二手术室录像',
            date: '2024-04-02',
            description: '手术实况清晰录，每一步操作皆可见'
          },
          {
            id: 3,
            title: '第三手术室录像',
            date: '2024-04-03',
            description: '精准操作映眼前，录像回放助学习'
          },
          {
            id: 4,
            title: '第四手术室录像',
            date: '2024-04-04',
            description: '手术全程无遗漏，录像资料显真章'
          },
          {
            id: 5,
            title: '第五手术室录像',
            date: '2024-04-04',
            description: '录像见证医者心，手术技艺传后人'
          },
          {
            id: 6,
            title: '第六手术室录像',
            date: '2024-04-05',
            description: '清晰记录手术景，操作流畅显水平'
          },
          {
            id: 7,
            title: '第七术室录像',
            date: '2024-04-06',
            description: '手术录像传千里，医学知识共分享'
          },
          {
            id: 8,
            title: '第八手术室录像',
            date: '2024-04-06',
            description: '录像保存手术景，精湛技艺永留存'
          },
          {
            id: 9,
            title: '第九手术室录像',
            date: '2024-04-07',
            description: '手术过程全展现，录像资料助研究'
          },
          {
            id: 10,
            title: '第十手术室录像',
            date: '2024-04-08',
            description: '录像记录手术时，医者仁心显无疑'
          },
          {
            id: 11,
            title: '第四手术室录像',
            date: '2024-04-09',
            description: '细节之处见真章，手术录像显真功'
          },
          {
            id: 12,
            title: '第五手术室录像',
            date: '2024-04-10',
            description: '录像还原手术景，精准操作显神通'
          },
        ]
      }
      this.loading = false
      this.videos = res.data
      this.pageparm.currentPage = this.videoInline.page
      this.pageparm.pageSize = this.videoInline.limit
      this.pageparm.total = res.count
      //测试环境使用模拟数据
      //正式环境 正式环境环境 调用接口
      videoList(parameter)
        .then(res => {
          this.loading = false
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.videos = res.data
            // 分页赋值
            this.pageparm.currentPage = this.videoInline.page
            this.pageparm.pageSize = this.videoInline.limit
            this.pageparm.total = res.count
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('数据加载失败，请稍后再试！')
        })
    },
    //
    videoAdd(){
          // 创建录像对象  
      const video = {  
          title: title,  
          date: date,  
          description: description || 'No description provided.'  
      };  
      // 将录像对象添加到数组中  
      videos.push(video);  
    },
    deleteVideo(index, item) {
      // 首先，检查 index
      if (index < 0 || index >= videos.length) {
        console.error('Invalid index for video deletion.');
        return;
      }
      // 验证要删除的 item 是否与数组中对应索引的 item 相匹配  
      if (videos[index] !== item) {
        console.error('The item to delete does not match the item at the given index.');
        return;
      }
      //删除录像
      axios.delete(`/api/videos/${item.id}`)
        .then(response => {
          if (response.success === 1) {
            // 从本地数组中移除录像  
            videos.splice(index, 1);
            //重新渲染录像列表  
            updateVideoListUI();
          } {
            alert('删除出错了')
          }
        })
        .catch(error => {
          alert('删除出错了')
        });
    },
    // 删除录像后被调用  
    updateVideoListUI() {
      this.$store.commit('updateVideos', videos);
    },
    //播放录像
    playVideo(video) {  
  // 视频的URL  
  const videoUrl = video.url;  
  // 检查视频URL是否有效  
  if (!videoUrl || typeof videoUrl !== 'string') {  
    console.error('Invalid video URL provided.');  
    return;  
  }  
  // 获取视频播放器元素  
  const videoPlayer  = document.getElementById('video-container');  
  videoPlayer .appendChild(videoElement); 
  if (!videoPlayer) {  
    console.error('Video player element not found.');  
    return;  
  }  
  // 清理之前的视频源和事件监听器
  videoPlayer.src = '';  
  videoPlayer.onended = null;  
  videoPlayer.onerror = null;  
  // 设置新的视频源  
  videoPlayer.src = videoUrl;  
  // 播放结束  
  videoPlayer.onended = function() {  
    console.log('Video playback ended.');  
  };  
  // 错误处理
  videoPlayer.onerror = function(error) {  
    console.error('An error occurred while playing the video:', error);  
  };  
  // 视频播放
  if (videoPlayer.readyState >= 4) {  
    // 视频已准备好，立即播放  
    videoPlayer.play();  
  } else {  
    // 监听 'canplay' 事件来开始播放  
    videoPlayer.addEventListener('canplay', function() {  
      videoPlayer.play();  
    });  
  }  
    } 
  }
}
</script>
<style scoped>
.video-replay-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.video-card {
  margin: 10px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 300px;
  max-width: 100%;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-header h3 {
  margin: 0;
}
.card-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
button {
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
button:hover {
  background-color: #eee;
}
.play-button{
  background-color: rgb(6, 131, 12);
  color: #ffffff;
  font-size: 16px;
}
.delete-button{
  background-color: rgb(247, 67, 13);
  color: #ffffff;
  font-size: 16px;
}
</style>
<!-- 手术进度 -->
<template>
  <div class="stbox">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: 'videoReplay/videoReplay' }">手术中心</el-breadcrumb-item>
      <el-breadcrumb-item>手术进度</el-breadcrumb-item>
    </el-breadcrumb> 
    <!-- 搜索 -->
    <el-row :gutter="23">
      <el-col :span="18">
        <div class="stbgc">
          <el-row :gutter="23">
            <el-col :span="7">
              <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-col>
            <el-col :span="7" class="stsearch">
              <el-button size="small" type="primary">搜索</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 统计图 -->
    <el-row :gutter="23">
      <el-col :span="8" class="text-c">
        <div class="st-gbox" style="width:400px;height: 350px;">
          <div class="cavasbox" ref="onechart"></div>
        </div>
      </el-col>
      <el-col :span="8" class="text-c">
        <div class="st-gbox" style="width:400px;height: 350px;">
          <div class="cavasbox" ref="twochart"></div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="23">
      <el-col :span="8" class="text-c">
        <div class="st-gbox" style="width:400px;height: 350px;">
          <div class="cavasbox" ref="threechart"></div>
        </div>
      </el-col>
      <el-col :span="8" class="text-c">
        <div class="st-gbox" style="width:400px;height: 350px;">
          <div class="cavasbox" ref="fourchart"></div>
        </div>
      </el-col>
    </el-row>
    <!-- 统计图 -->
  </div>
</template>
<script type="text/ecmascript-6">
import Chart from 'echarts'
export default {
  name: "welcome",
  data() {
    return {
      machineNo: '',
      type: 'day',
      // 第一手术室进度
      oneoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}%"
        },
        title: {
          text: '第一手术室进度',
        },
        grid: {
          left: 50,
          right: 10,
          // top: 30,
          bottom: 30,
          borderWidth: 1
        },
        series: [
          {
            name: '第一手术室进度',
            type: 'gauge',
            detail: { formatter: '{value}%' },
            data: [{ value: 28, name: '手术室进度' }],
            axisLine: {
                lineStyle: {
                    width: 30,
                    color: [
                        [0.3, '#800000'], // 0 到 30% 使用颜色渐变
                        [0.7, '#A52A2A'], // 30% 到 70% 使用颜色渐变
                        [1, '#ff0000'],   // 70% 到 100% 使用颜色渐变
                    ]
                }
            },
          }
        ]
      },
        //  第二手术室进度
      twooption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}%"
        },
        title: {
          text: '第二手术室进度',
        },
        grid: {
          left: 50,
          right: 10,
          // top: 30,
          bottom: 30,
          borderWidth: 1
        },
        series: [
          {
            name: '第二手术室进度',
            type: 'gauge',
            detail: { formatter: '{value}%' },
            data: [{ value: 37, name: '手术室进度' }],
            axisLine: {
                lineStyle: {
                    width: 30,
                    color: [
                        [0.3, '#f08080'], // 0 到 30% 使用颜色渐变
                        [0.7, '#ffa07a'], // 30% 到 70% 使用颜色渐变
                        [1, '#FF8c00'],   // 70% 到 100% 使用颜色渐变
                    ]
                }
            },
          }
        ]
      },
        // 第三手术室进度
      threeoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}%"
        },
        title: {
          text: '第三手术室进度',
        },
        grid: {
          left: 50,
          right: 10,
          // top: 30,
          bottom: 30,
          borderWidth: 1
        },
        series: [
          {
            name: '第三手术室进度',
            type: 'gauge',
            detail: { formatter: '{value}%' },
            data: [{ value: 76, name: '手术室进度' }],
            axisLine: {
                lineStyle: {
                    width: 30,
                    color: [
                        [0.3, '#006400'], // 0 到 30% 使用颜色渐变
                        [0.7, '#228b22'], // 30% 到 70% 使用颜色渐变
                        [1, '#2e8b57'],   // 70% 到 100% 使用颜色渐变
                    ]
                }
            },
          }
        ]
      },
      //第四手术室进度
      fouroption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}%"
        },
        title: {
          text: '第四手术室进度',
        },
        grid: {
          left: 50,
          right: 10,
          // top: 30,
          bottom: 30,
          borderWidth: 1
        },
        series: [
          {
            name: '第四手术室进度',
            type: 'gauge',
            detail: { formatter: '{value}%' },
            data: [{ value: 48, name: '手术室进度' }],
            axisLine: {
                lineStyle: {
                    width: 30,
                    color: [
                        [0.3, '#33CC33'], // 0 到 30% 使用颜色渐变
                        [0.7, '#33CCCC'], // 30% 到 70% 使用颜色渐变
                        [1, '#33CCFF'],   // 70% 到 100% 使用颜色渐变
                    ]
                }
            },
          },
        ]
      },
    }
  },
  created() { },
  mounted() {
    this.getOne()
    this.getTwo()
    this.getThree()
    this.getFour()
  },
  // 里面的函数只有调用才会执行
  methods: {
    //第一手术室
    getOne() {
      this.chart = Chart.init(this.$refs.onechart) //深色模式  ,'dark'
      this.chart.setOption(this.oneoption)
    },
    // 第二手术室
    getTwo() {
      this.chart = Chart.init(this.$refs.twochart)
      this.chart.setOption(this.twooption)
    },
    // 第三手术室
    getThree() {
      this.chart = Chart.init(this.$refs.threechart)
      this.chart.setOption(this.threeoption)
    },
     // 第四手术室
    getFour() {
      this.chart = Chart.init(this.$refs.fourchart)
      this.chart.setOption(this.fouroption)
    },
  }
};
</script>